import { wsApi } from '@app-base/server';
import { Button, Modal, Space } from 'antd';
import React, { useState } from 'react';
import FilterSidebar from './filter-sidebar';
import SupportCardGrid from './support-card-grid';

interface SupportFilterProps {
  open: boolean;
  handleCancel: () => void;
  selectedRow: SupportFilterFields.BracketInfoMeta;
  SendExaminesCommand: () => void;
}

const SupportFilter: React.FC<SupportFilterProps> = ({
  open,
  handleCancel,
  SendExaminesCommand,
  selectedRow,
}) => {
  const [selectedRank, setSelectedRank] = useState<number>();
  const [selectedBracket, setSelectedBracket] = useState<string>();
  const [cards, setCards] = useState<SupportFilterFields.BracketCardItem[]>([]);

  const onSearchCondition = async (formInfo: Record<string, string[]>) => {
    const res = await wsApi.execAiCmd({
      c: 'GetSearchResult', // 方法名称
      name: selectedRow.clamp,
      a: formInfo,
    });
    setCards(res.content || []);
    setSelectedRank(res.content?.[0]?.rank);
    setSelectedBracket(res.content?.[0]?.bracket);
  };

  const onSatisfyClick = async (isSatisfy: boolean) => {
    await wsApi.execAiCmd({
      c: 'SatisfyCandidate',
      name: selectedRow.clamp,
      a: {
        rank: isSatisfy ? selectedRank : -1,
        bracket: isSatisfy ? selectedBracket : '',
      },
    });
    handleCancel();
    SendExaminesCommand();
  };
  return (
    <Modal
      title='支架筛选'
      open={open}
      onCancel={handleCancel}
      footer={
        <Space>
          <Button
            onClick={() => onSatisfyClick(false)}
            style={{ marginRight: 8 }}
          >
            不满意
          </Button>
          <Button
            onClick={() => onSatisfyClick(true)}
            type='primary'
          >
            满意
          </Button>
        </Space>
      }
      width={800}
    >
      <div className='flex p-4 max-h-[700px] gap-6'>
        <FilterSidebar
          selectedRow={selectedRow}
          onSearchCondition={onSearchCondition}
        />
        <SupportCardGrid
          selectedRank={selectedRank}
          cards={cards}
          setSelectedRank={setSelectedRank}
          setSelectedBracket={setSelectedBracket}
        />
      </div>
    </Modal>
  );
};

export default React.memo(SupportFilter);
